new Vue({
    el: '#app',
    data: {
        btnList: [
            {
                name: '网页常用颜色',
                icon: 'icon-addd',
                mark: 'web_color'
            },
            {
                name: '字符串工具',
                icon: 'icon-zifuchuan',
                mark: 'str_edit'
            },
            {
                name: '图像处理器',
                icon: 'icon-tianjiantuxiang',
                mark: 'img_editor'
            },
            {
                name: '番茄钟',
                icon: 'icon-fanqieshijian',
                mark: 'clock_tomato'
            },
            {
                name: '计算器',
                icon: 'icon-calculator',
                mark: 'calculator'
            }
        ],
        animationClass: '',
        boxVisiable: true
    },
    mounted() {
        //加载鼠标移出移入显示隐藏的监听
        document.querySelector('.plant-t-btn-pad').addEventListener('mouseenter', () => {
            //移入，显示pad
            this.showBox()
        })
        document.querySelector('.plant-t-btn-pad').addEventListener('mouseleave', () => {
            //移出，隐藏pad
            this.hideBox()
        })
        setTimeout(() => {
            this.hideBox()
        }, 600)
    },
    methods: {
        showBox() {
            this.boxVisiable = true
            window.$.sendIpc('main-pad-hide-show', 'show')
            this.animationClass = 'showAnimation'
        },
        hideBox() {
            this.animationClass = 'hideAnimation'
            setTimeout(() => {
                this.boxVisiable = false
                window.$.sendIpc('main-pad-hide-show', 'hide')
            }, 230)
        },
        openUtilPad(mark) {
            window.$.sendIpc('main-pad-open-window', mark)
        }
    }
})